<!-- 领取优惠券弹窗1 -->
<template>
	<view>
		<u-popup v-model="show" 
			mode="center" 
			:mask-close-able="false" 
			border-radius="40" 
			:zoom="false"
		>
			<view class="popup-container">
				<view class="body1">
					<image class="bg" src="/static/wxImage/bg-getCoupon.png" mode="aspectFill"></image>
					<view class="content">
						<view class="info">优惠券已发放到您的账户</view>
						<view class="info">可在<text style="color: #FFE164;">“个人中心-优惠券”</text>中查看</view>
						<view class="see" @tap="seeCoupon">立即查看</view>
					</view>
				</view>
				<view class="icon-cha">
					<image @tap="close"  src="/static/wxImage/icon-cha.png" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		name:'get-coupon',
		data() {
			return {
				show:false,
				src:'',
				canTap: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.canTap = true;
			},1500)
		},
		methods:{
			seeCoupon() {
				this.close();
				uni.redirectTo({
					url:'/pagesUc/user-ticket/index'
				})
			},
			open() {
				this.show = true;
			},
			close() {
				if(this.canTap) {
					this.show = false;
				};
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		
		.body1 {
			width: 650rpx;
			height: 588rpx;
			background-color: rgba(255,255,255,0.1);
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			flex-direction: column;
			background: #FFFFFF;
			overflow: hidden;
			border-radius: 40rpx;
			
			.bg {
				width: 100%;
				height: 100%;
			}
			.content {
				position: absolute;
				padding-top: 200rpx;
				view {
					color: #FFFFFF;
				}
				.info {
					padding-left: 40rpx;
					position: relative;
					line-height: 2.0;
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: url(../../pagesAc/static/wxImage/icon-cube.png);
						background-repeat: no-repeat;
						width: 25rpx;
						height: 25rpx;
						background-size: 25rpx 25rpx;
					}
				}
				.see {
					width: 500rpx;
					height: 90rpx;
					margin-top: 100rpx;
					background: linear-gradient(0deg, #FDF575, #FFFFFF);
					box-shadow: 0px 4rpx 9rpx 1rpx rgba(57, 57, 170, 0.41);
					border-radius: 12rpx;
					color: #5555F1;
					line-height: 90rpx;
					text-align: center;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
		
		.icon-cha {
			margin-top: 100rpx;
			text-align: center;
			>image {
				width: 70rpx;
				height: 70rpx;
			}
		}	
	}
</style>
